.Draggable {
  position: absolute;
  display: flex;
  overflow: visible;

  &:not(.handle) {
    > button {
      cursor: grab;
      touch-action: none;

    }
  }

  &.handle {
    > button {
      --action-background: rgba(255, 255, 255, 0.1);

      > svg {
        margin-right: 5px;
      }

      > button {
        margin-right: -10px;
      }
    }
  }

  &.dragging {
    z-index: 1;
    transition: none;
    --scale: 1;

    * {
      cursor: grabbing;
    }
  }

  &.dragOverlay,
  &.dragging {
    animation: pop 250ms linear forwards;
  }
}

@keyframes pulse {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes pop {
  0% {
    border: 1px solid var(--border-color);
    transform: translate3d(var(--translate-x, 0), var(--translate-y, 0), 0)
      scale(1);
  }

  100% {
    border: 1px solid var(--border-color);
    transform: translate3d(var(--translate-x, 0), var(--translate-y, 0), 0)
      scale(var(--scale));
  }
}
